<template>
  <div class="tg" v-if="data">
    <router-link to="/">
      <div>
        <img
          src="https://image.hongbeibang.com/FoTuxKG5pqYKuAsT8BjrflkAxEpj?48X48&imageView2/1/w/48/h/48"
          alt=""
        />
        <p>新手指南</p>
      </div>
    </router-link>
    <div class="tab">
      <img :src="data.image" alt="" />
      <!-- 烘焙专题 -->
      <div class="container">
        <div class="title">
          <h3>{{ data.title }}</h3>
          <!-- 在学人数 -->
          <div class="icon">
            <van-icon
              name="https://image.hongbeibang.com/FgRQxfAWq4kOdLc5xd_GxWm03Vs_?54X54&imageView2/1/w/54/h/54"
              size="30"
            />
            <p>1000+</p>
            <p>人在学</p>
          </div>
        </div>
      </div>
      <van-tabs v-model="active" sticky class="text">
        <!-- 1. 课程介绍 -->
        <van-tab title="课程介绍">
          <div class="text">
            <div class="text-one">
              <h3>特别说明</h3>
              <p>
                本专栏课程已有超6000+帮友报名学习，包含7节专题课：工具材料专题、完美戚风蛋糕、2款经典蛋挞、中式经典蛋黄酥、3款经典饼干、零基础制作生日蛋糕、葱香南瓜吐司，单独购买共需
                79 元。
              </p>
              <p>
                <strong>专栏内测限时优惠,，仅需29元</strong
                >，课程报名后支持永久无限次回看。
              </p>
            </div>
            <div class="text-two">
              <h3>本专栏包含以下内容</h3>
              <p>一、烘焙常见工具材料的介绍与选择方法</p>
              <div>
                <p>二、4\6\8\10寸戚风蛋糕</p>
                <img
                  src="https://image.hongbeibang.com/Ft7T9hxqxTU7WBCX6kLbOWCYOBiF?750X420"
                  alt=""
                />
                <ul>
                  <li>1、戚风材料工具详解</li>
                  <li>
                    2、完美戚风蛋糕的制作方法详解（包含制作方法与注意事项）
                  </li>
                  <li>3、完美戚风蛋糕的配方</li>
                  <li>
                    4、戚风蛋糕12大问题（消泡、开裂、塌陷、凹底、缩腰、大气泡、涨不高、烤焦、不上色、腥味重等）应对方法详解
                  </li>
                </ul>
              </div>
              <div>
                <p>三、零基础制作生日蛋糕</p>
                <img
                  src="http://image.hongbeibang.com/FtwJPNW5MY_S3wGoELhkC8hGmnNe?750X420"
                  alt=""
                />
                <ul>
                  <li>1、承重性超好的戚风蛋糕胚的制作</li>
                  <li>2、不同用途（夹馅、抹面、挤花）动物奶油的完美打发</li>
                  <li>3、生日蛋糕裁胚、夹馅、抹面的详细讲解</li>
                  <li>4、巧克力文字插牌的制作</li>
                  <li>
                    5、两款简单易操作的蛋糕装饰方法（生日装饰蛋糕、圣诞装饰蛋糕）
                  </li>
                  <li>6、生日蛋糕的使用与保存</li>
                </ul>
              </div>
              <div>
                <p>四、葡式蛋挞&英式蛋挞</p>
                <img
                  src="http://image.hongbeibang.com/Fr2KGYk4Hn4j8eJR6zhRBo3ZtCFm?800X447"
                  alt=""
                />
                <ul>
                  <li>1、蛋挞用材料讲解</li>
                  <li>
                    2、英式蛋挞与葡式蛋挞的制作方法详解（包含曲奇挞皮、千层挞皮、两种挞液）
                  </li>
                  <li>3、完美英式蛋挞配方与完美葡式蛋挞配方</li>
                  <li>4、蛋挞常见问题的解析</li>
                </ul>
              </div>
              <div class="text-three">
                <img
                  src="https://image.hongbeibang.com/FgyNuZ8yE795vzF-O4lGF3G5Caxr?551X245&imageView2/1/w/551/h/242"
                  alt=""
                />
                <p>
                  烘焙帮学堂，是由烘焙帮推出的课程品牌，通过官方自制的教学视频，用科学的烘焙配方、细致的步骤讲解、贴心的答疑服务，让烘焙更简单！
                </p>
              </div>
            </div>
          </div>
        </van-tab>

        <!-- 2. 课程目录 -->
        <van-tab title="课程目录">
          <div
            class="content"
            v-for="{ educationCourseId, title, image } in content.data"
            :key="educationCourseId"
            @click="detail(educationCourseId)"
          >
            <div class="f1">
              <img :src="image" alt="" />
            </div>
            <div class="f2">
              <h4>{{ title }}</h4>
              <p>免费试看</p>
            </div>
          </div>
        </van-tab>

        <!-- 3. 学院作业 -->
        <van-tab title="学员作业">
          <div class="to">
            <div
              class="three"
              v-for="{
                contentId,
                image,
                clientImage,
                clientName,
                introduce,
              } in to.data"
              :key="contentId"
              @click="xueyuan(contentId)"
            >
              <div class="three-one">
                <img :src="image" alt="" />
              </div>
              <div class="three-two">
                <div>
                  <img :src="clientImage" alt="" />
                </div>
                <h4>{{ clientName }}</h4>
              </div>
              <div class="treen-true">
                <h4 v-if="introduce">
                  {{ introduce }}
                </h4>
                <h4 v-else>新鲜出炉</h4>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
      <!-- 底部 -->
      <van-submit-bar :price="2900" button-text="购买专栏" />
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.getData();
    this.getContents();
    this.getTo();
  },
  data() {
    return {
      data: {},
      content: {},
      to: {},
      active: 0,
    };
  },
  methods: {
    // 学员作业
    xueyuan(contentId) {
      this.$router.push({
        path: "/xueyuan",
        query: {
          lid: contentId,
        },
      });
    },
    // 课程目录传参跳转
    detail(educationCourseId) {
      this.$router.push({
        path: "/guidebook/detail",
        query: {
          id: educationCourseId,
        },
      });
    },
    // 课程介绍
    getData() {
      this.axios
        .get(
          "/education/getCourse?_t=1665659316659&educationCourseId=10533&timestamp=1665659316659"
        )
        .then((res) => {
          this.data = res.data.data;
        });
    },
    // 课程目录
    getContents() {
      this.axios
        .get(
          "/education/getSeriesCourse?_t=1665735986721&pageIndex=0&pageSize=10&educationCourseId=10533&timestamp=1665735986721"
        )
        .then((content) => {
          this.content = content.data.data;
        });
    },
    // 学员作业
    getTo() {
      this.axios
        .get(
          "/dish/getOutstandingCourseContent?_t=1665748410934&pageIndex=0&pageSize=10&educationCourseId=10533&timestamp=1665748410933"
        )
        .then((to) => {
          this.to = to.data.data.content;
          let three = to.data.data.content.data.introduce;
        });
    },
  },
};
</script>

<style scoped>
/* 组件颜色 */
.van-nav-bar .van-icon {
  color: #000000;
  font-size: 14px;
}
.tg > a > div:first-child > img {
  width: 8vw;
  margin: 2vh 3vw;
}
.tg > a > div:first-child {
  display: flex;
}
.tg > a > div:first-child > p {
  margin-top: 3vh;
  margin-left: 27vw;
  color: black;
  font-size: 5vw;
}
.container {
  width: 90%;
  margin: 0 auto;
}
/* 总屏幕尺寸 */

.tab {
  width: 100%;
  margin: 0 auto;
  color: #2f2f2f;
}
.tab > img {
  width: 100%;
}
/* 新手烘焙 */
.title {
  margin: 1vh 3vw;
}
.tg::after {
  content: "";
  display: block;
  height: 8vh;
}
/* 在学人数 */
.icon {
  display: flex;
  margin-top: 2vh;
}
.icon > p {
  margin-top: 1vh;
}
.icon > p:nth-child(2) {
  font-size: 14px;
  margin-right: 1vw;
  color: #ec8b71;
}
.text {
  width: 90vw;
  margin: 0 auto;
}
.text img {
  display: inline-block;
  width: 100%;
}
.text .text-one {
  margin: 5vh 0;
}
.text .text-two {
  margin-top: 10vh;
  padding-bottom: 2vh;
}
.text .text-three > img {
  margin-top: 7vh;
  width: 40%;
}
h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 2vh;
  color: rgb(27, 26, 26);
}
p,
li {
  font-size: 16px;
  margin-bottom: 2vh;
}
/* 课程目录 */
.content {
  display: flex;
  width: 90vw;
  margin-top: 2vh;
  height: 15vh;
}
.content .f1 {
  width: 40vw;
  margin-right: 2vw;
}
.content > img {
  width: 100%;
}
.content .f2 {
  width: 50vw;
}
.content .f2 > p {
  color: red;
  font-size: 12px;
  margin-top: 2vh;
}
.content .f2 > h4 {
  font-size: 4vw;
}
/* 第三模块 */
.to {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.three {
  width: 40vw;
  height: 33vh;
  overflow: hidden;
  margin-bottom: 2vh;
}
.three-one {
  width: 40vw;
  height: 40vw;
  overflow: hidden;
}
.three-one > img {
  width: 100%;
}
.three-two {
  display: flex;
  margin-top: 1vh;
}
.three-two > h4 {
  margin: 2vh 1vw;
}
.three-two > div {
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 100%;
}
.three-two > div > img {
  width: 100%;
}
.threen-true {
  width: 40vw;
  /* height: 2vh; */
}
.threen-true > h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
